<template>
  <nw-PageTitle :title="$t('system.voiceBroad')" isBack />
  <nw-PageContainer>
    <scroll-view class="scroll-content" scroll-y enable-flex>
      <view class="ul">
        <view class="li">
          <view class="li-left">
            <view class="main-title">{{ $t('system.voiceBroad') }}</view>
            <view class="content">炒菜状态进行语音播报</view>
          </view>
          <view class="li-right">
            <nw-Switch v-model="value1"></nw-Switch>
          </view>
        </view>
        <view class="li">
          <view class="li-left">
            <up-radio-group class="nw-radio-group" v-model="value2">
              <nw-Radio name="1">
                <template #label>
                  <view class="title">简洁播报</view>
                </template>
              </nw-Radio>
            </up-radio-group>
            <view class="content">仅播报开始、完成、食材投放等主要步骤</view>
          </view>
        </view>
        <view class="li">
          <view class="li-left">
            <up-radio-group class="nw-radio-group" v-model="value2">
              <nw-Radio name="2">
                <template #label>
                  <view class="title">详细播报</view>
                </template>
              </nw-Radio>
            </up-radio-group>
            <view class="content">每个步骤、操作 都进行播报</view>
          </view>
        </view>
      </view>
      <view class="ul">
        <view class="li">
          <view class="li-left">
            <view class="main-title">语音识别</view>
            <view class="content">语音控制命令相关设置</view>
          </view>
          <view class="li-right">
            <nw-Switch v-model="value4"></nw-Switch>
          </view>
        </view>
        <view class="li">
          <!-- <view class="li-left">
            <up-radio-group class="nw-radio-group" v-model="value2">
              <nw-Radio name="1">
                <template #label>
                  <view class="title">简洁播报</view>
                </template>
              </nw-Radio>
            </up-radio-group>
            <view class="content">仅播报开始、完成、食材投放等主要步骤</view>
          </view> -->
        </view>
      </view>
    </scroll-view>
  </nw-PageContainer>
</template>

<script setup>
const value1 = ref(false)
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')

onMounted(_ => {
  // getDataList()
})

function getDataList() {
  //
}
</script>

<style lang="scss" scoped>
.ul {
  margin: 20rpx;
  box-sizing: border-box;
  background-color: var(--bg-color);
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
  border-radius: 18rpx;
  .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38 * 2rpx;
    margin: 0 22rpx;
    + .li {
      border-top: 1rpx solid var(--border-color);
    }
    .li-left {
      display: flex;
      align-items: center;
      .main-title {
        font-size: 26rpx;
        font-weight: 600;
        color: var(--color-333);
      }
      .title {
        margin-left: 12rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: var(--color-333);
      }
      .content {
        margin-left: 20rpx;
        font-size: 18rpx;
        font-weight: 400;
        color: var(--color-999);
      }
    }
  }
}
</style>
